<template>
	<view class="page_box">
		<u-navbar :is-back="false" title=" " v-if="1" :border-bottom="fasle"></u-navbar>

		<view class="content_box">
			<view class="head bg-img ww100 h660  flex  flex-direction justify-end">
				<view class="head-top  flex padding-lr-xl">
					<open-data
						class="round  w140 h140 "
						:class="c == 1 ? 'anni' : ''"
						type="userAvatarUrl"
						style="border-radius: 50%; overflow: hidden;"
					></open-data>

					<view class="flex  flex-direction ml30 justify-around">
						<open-data class="f40 text-bold text-black" type="userNickName"></open-data>

						<text class="f28 text-gray">邀请码：{{ user.invite_code ? user.invite_code : 'DSFGA' }}</text>
					</view>
				</view>
				<view class="flex mt46 mb35">
					<view class="f-1  flex flex-direction  align-center " @click="l.to('/pages/my/myPurse')">
						<view class="flex align-center">
							<text class="f36 text-price text-bold"></text>
							<u-count-to
								:start-val="0"
								:end-val="user.balance ? user.balance + '' : 0"
								font-size="36"
								bold
								:decimals="2"
							></u-count-to>
						</view>

						<text class="f24 text-gray mt27">我的钱包</text>
					</view>
					<view class="f-1  flex flex-direction  align-center " @click="l.to('/pages/my/pointsCtr')">
						<view class="flex align-center">
							<text class="f36  text-bold"></text>
							<u-count-to
								:start-val="0"
								:end-val="user.score ? user.score + '' : 0"
								font-size="36"
								:decimals="2"
								bold
							></u-count-to>
						</view>
						<text class="f24 text-gray mt27">我的积分</text>
					</view>
					<!-- <view class="f-1  flex flex-direction align-end ">
						<text class="f36 text-price text-bold">56</text>
						<text class="f24 text-gray mt27">优惠券</text>
					</view> -->
				</view>
				<view class=" flex justify-center">
					<!-- 未支付 -->
					<view class="boder bg-img w690 h160 flex justify-between" v-if="!user">
						<view class=" flex flex-direction justify-center ml105">
							<!-- <text class="f30 " style="color: #FBEC9A;">{{ user.card_name }}超级会员</text> -->
							<text class="f30 text-bold" style="color: #FBEC9A;">成为会员</text>
							<text class="f26 mt23" style="color: #FBEC9A;">享折扣,返佣金,赠免费饮品</text>
						</view>
						<view class=" flex align-center mr60" @click.stop="l.to('/pages/my/myMbr')">
							<view
								class="w136 h52 flex align-center  justify-center round "
								style="background-color: #FBEC9A; color: #776500;"
							>
								<text class="f24">成为会员</text>
							</view>
						</view>
					</view>
					<!-- 已支付 -->
					<view class="" v-else>
						<view class="boder bg-img w690 h160 flex justify-between" v-if="user.is_expire">
							<view class=" flex flex-direction justify-center ml105">
								<!-- <text class="f30 " style="color: #FBEC9A;">{{ user.card_name }}超级会员</text> -->
								<text class="f30 text-bold" style="color: #FBEC9A;">成为会员</text>
								<text class="f26 mt23" style="color: #FBEC9A;">享折扣,返佣金,赠免费饮品</text>
							</view>
							<view class=" flex align-center mr60" @click.stop="l.to('/pages/my/myMbr')">
								<view
									class="w136 h52 flex align-center  justify-center round "
									style="background-color: #FBEC9A; color: #776500;"
								>
									<text class="f24">成为会员</text>
								</view>
							</view>
						</view>
						<view
							class="boder bg-img w690 h160 flex justify-between"
							@touchend.stop="touchend"
							@longtap.stop="logoTime"
							v-else
						>
							<view class=" flex flex-direction justify-center ml105">
								<text class="f30 text-bold " style="color: #FBEC9A;">{{ user.card_name }}</text>

								<text class="f26 mt23" style="color: #FBEC9A;">{{ user.member_expire_time }}</text>
							</view>
							<view class=" flex align-center mr60" @click.stop="l.to('/pages/my/myMbr')">
								<view
									class="w136 h52 flex align-center  justify-center round "
									style="background-color: #FBEC9A; color: #776500;"
								>
									<text class="f24">查看特权</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- [
				{
					a: '/static/list1.png',
					b: '活动/路演',
					c: '/pages/my/activity'
				},
				{
					a: '/static/list3.png',
					b: '我的邀请',
					c: '/pages/my/invite?card_now_price=' + this.user.card_now_price
				},
				{
					a: '/static/2323.png',
					b: '修改报名资料',
					c: '/pages/my/modifyInfo'
				},
				{
					a: '/static/list2.png',
					b: '设置',
					c: '/pages/my/setUp'
				}
			]; -->

			<view class="mt38 padding-lr-lg">
				<view class="flex align-center" @click="l.to('/pages/my/activity')">
					<image src="/static/list1.png" mode="" class="w38 h38"></image>
					<view class="padding-tb-lg flex justify-between solid-bottom ww100 ml18">
						<text class="f28">活动/路演</text>
						<i class="cuIcon-right"></i>
					</view>
				</view>
				<view class="flex align-center" @click="l.to('/pages/my/invite?card_now_price='+ this.user.card_now_price)">
					<image src="/static/list3.png" mode="" class="w38 h38"></image>
					<view class="padding-tb-lg flex justify-between solid-bottom ww100 ml18">
						<text class="f28">我的邀请</text>
						<i class="cuIcon-right"></i>
					</view>
				</view>
				<view class="flex align-center" @click="l.to('/pages/my/modifyInfo')" v-if="showData">
					<image src="/static/2323.png" mode="" class="w38 h38"></image>
					<view class="padding-tb-lg flex justify-between solid-bottom ww100 ml18">
						<text class="f28">修改报名资料</text>
						<i class="cuIcon-right"></i>
					</view>
				</view>
				<view class="flex align-center" @click="l.to('/pages/my/setUp')">
					<image src="/static/list2.png" mode="" class="w38 h38"></image>
					<view class="padding-tb-lg flex justify-between solid-bottom ww100 ml18">
						<text class="f28">设置</text>
						<i class="cuIcon-right"></i>
					</view>
				</view>
			</view>
		</view>
		<!-- <u-tabbar v-model="current" :list="tabbarList" :border-top="false" active-color="#F2736D" @change="change"></u-tabbar> -->
		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
		<showTips></showTips>
	</view>
</template>

<script>
export default {
	data() {
		return {
			info: uni.getStorageSync('userInfo'),
			user: {},

			list: [],
			c: 0,
			showData: false,
			
		};
	},
	onShow() {
		this.personalCtr();
		this.name();
	},
	watch: {
		vuex_login(newValue, oldValue) {
			console.log('newValue: ', newValue);
			console.log('oldValue :>> ', oldValue);
			!newValue && this.personalCtr();
		}
	},

	onLoad(e) {},
	methods: {
		async touchend() {
			this.c = 0;
		},
		async logoTime() {
			uni.vibrateLong({
				success: () => {
					this.c = 1;
				}
			});
		},
		async name() {
			const res = await this.$u.post('UserInfo/extendsInfo', {}, {});

			if (res.data) {
				this.showData = true;
			}
			console.log('this.showData :>> ', this.showData);
		},
		async personalCtr() {
			let obj = {
				// uid: uni.getStorageSync("uid"),
			};
			const res = await this.$u.post('UserInfo/memberCard', obj, {});

			this.user = res.data;

			// this.list =
		}
	}
};
</script>

<style lang="scss" scoped>
.page_box {
}
.anni {
	animation: turn 0.1s linear infinite;
}
@keyframes turn {
	0% {
		-webkit-transform: rotate(0deg);
	}
	25% {
		-webkit-transform: rotate(90deg);
	}
	50% {
		-webkit-transform: rotate(180deg);
	}
	75% {
		-webkit-transform: rotate(270deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
	}
}
/deep/u-navbar {
	position: fixed;
	top: 0;
	transform: translateX(-50%);
	z-index: 99999;
	// background-color: transparent !important;
}
.content_box {
	.head {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210615184150.png);
	}
	.boder {
		background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210616164845.png);
	}
}
</style>
